<template>
  <div class="productControlSearchForm">
    <el-tabs
      v-model="formInline.type"
      @tab-click="handleClick">
      <el-tab-pane
        label="使用中"
        name="1"/>
      <el-tab-pane
        label="其他记录"
        name="0"/>
    </el-tabs>
    <el-form
      :inline="true"
      :model="formInline"
      label-width="100px"
      class="el-form--inline certificateForm">

      <el-form-item label="注册证号">
        <el-input
          v-model="formInline.registrationNumber"
          placeholder="请输入注册证号"/>
      </el-form-item>

      <el-form-item label="产品名称(中)">
        <el-input
          v-model="formInline.nameCN"
          placeholder="请输入注产品名称(中)"/>
      </el-form-item>

      <el-form-item label="产品名称(英)">
        <el-input
          v-model="formInline.nameEN"
          placeholder="请输入注产品名称(英)"/>
      </el-form-item>

      <el-form-item label="生产厂家">
        <el-input
          v-model="formInline.manufacturer"
          placeholder="请输入生产厂家"/>
      </el-form-item>

      <!-- <el-form-item label="状态">
        <el-select
          v-model="formInline.status"
          placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
      </el-form-item> -->

      <el-form-item label="审核状态">
        <el-select
          v-model="formInline.auditStatus"
          placeholder="请选择">
          <el-option
            v-for="item in approvalStatus"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
      </el-form-item>

      <el-form-item label="备注">
        <el-input
          v-model="formInline.remark"
          placeholder="请输入备注"/>
      </el-form-item>

      <!-- <el-form-item
        label="有效期至"
        class="certificateFormDataPicker">
        <el-date-picker
          value-format= 'yyyy-MM-dd'
          v-model="formInline.expireDateStart"
          type="date"
          placeholder="开始日期"/>
        -
        <el-date-picker
          v-model="formInline.expireDateEnd"
          type="date"
          value-format= 'yyyy-MM-dd'
          placeholder="结束日期"/>
      </el-form-item>

      <el-form-item
        label="生产日期"
        class="certificateFormDataPicker">
        <el-date-picker
          v-model="formInline.productStart"
          value-format= 'yyyy-MM-dd'
          type="date"
          placeholder="开始日期"/>
        -
        <el-date-picker
          v-model="formInline.productEnd"
          value-format= 'yyyy-MM-dd'
          type="date"
          placeholder="结束日期"/>
      </el-form-item> -->

      <el-form-item
        class="searchButtonList"
      >
        <el-button
          class="submit"
          @click.stop="serach">查询</el-button>
        <el-button
          class="reset"
          @click.stop="reset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
const approvalStatus = [
  {
    label: '草稿',
    value: '0'
  },
  {
    label: '待审核',
    value: '1'
  },
  {
    label: '已驳回',
    value: '2'
  },
  {
    label: '通过',
    value: '3'
  },
  {
    label: '历史版本',
    value: '4'
  }
]
export default {
  name: 'ProductControlSearchForrm',
  data () {
    return {
      formInline: {
        registrationNumber: null,
        nameCN: null,
        nameEN: null,
        manufacturer: null,
        status: null,
        auditStatus: null,
        remark: null,
        type: '1'
      },
      approvalStatus,
      value: ''
    }
  },
  methods: {
    serach () {
      this.$emit('searchForm', this.formInline)
    },
    handleClick () {
      this.$emit('changeStatu', this.formInline)
    },
    reset () {
      this.formInline = {
        generralNumber: null,
        registrationNumber: null,
        productNameCN: null,
        productNameEN: null,
        Manufacturer: null,
        status: null,
        reviewStayus: null,
        remark: null,
        productStart: null,
        productEnd: null,
        type: this.formInline.type
      }
      // this.$emit('resetForm', this.formInline)
    }
  }
}
</script>

<style lang="less">
    .certificateForm .el-form-item {
      margin-right: 16px;
      margin-bottom: 16px;
    }

    .certificateForm .el-input__inner {
      border-radius: 0 !important;
      height: 34px;
      line-height: 34px;
      width: 211px;
    }

    .certificateForm .el-form-item__label {
      padding-right: 10px;
    }

    .certificateFormDataPicker .el-date-editor.el-input,
    .certificateFormDataPicker .el-input__inner {
      width: 140px;
    }
</style>

<style  lang="less">
  .productControlSearchForm {
    .certificateForm {
      .searchButtonList {
        float: right;
        margin-right: 30px;

        button {
          width: 74px;
          height: 34px;
          cursor: pointer;
          margin-left: 10px;
        }
      }

      .submit {
        background: rgba(35, 113, 197, 1);
        border: 0;
        color: #fff;
      }

      .reset {
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(221, 223, 225, 1);
      }
    }

    .el-tabs {
      .el-tabs__header {
        .el-tabs__nav-wrap {
          &::after {
            display: none;
          }

          .is-active {
            font-size: 24px;
          }
        }
      }
    }
  }

</style>
